<div [class]="['alert-icon', alertLevelColor]">
  <ix-icon
    class="alert-icon"
    [name]="icon"
    [matTooltip]="iconTooltip"
  ></ix-icon>
</div>

<div class="alert-body">
  @if (!alert().dismissed) {
    <h3 [class]="['alert-level', alertLevelColor]">
      {{ levelLabel() }}
    </h3>
  }
  <h4
    #alertMessage
    class="alert-message"
    [class.collapsed]="isCollapsed()"
    [innerHTML]="alert().formatted"
  ></h4>
  @if (isExpandable()) {
    <button
      mat-button
      class="expand-collapse-button"
      [ixTest]="[alert().key, 'expand']"
      [class.collapsed]="isCollapsed()"
      (click)="toggleCollapse()"
    >
      {{ isCollapsed() ? ('View More' | translate) : ('Collapse' | translate) }}
    </button>
  }
  @if (isHaLicensed()) {
    <div class="alert-node">{{ alert().node }}</div>
  }
  <div class="alert-time">
    {{ alert().datetime.$date | formatDateTime }}
    @if (timezone$ | async; as timezone) {
      ({{ timezone }})
    }
  </div>

  <div class="links">
    @if (alert().dismissed) {
      <a
        *ixRequiresRoles="requiredRoles"
        tabindex="0"
        role="button"
        class="action-link"
        [ixTest]="[alert().key, 'reopen']"
        (click)="onReopen()"
      >
        {{ 'Re-Open' | translate }}
      </a>
    } @else {
      <a
        *ixRequiresRoles="requiredRoles"
        tabindex="0"
        role="button"
        class="action-link"
        [ixTest]="[alert().key, 'dismiss']"
        (click)="onDismiss()"
      >
        {{ 'Dismiss' | translate }}
      </a>
    }

    @let linkLabel = link()?.label;
    @if (linkLabel) {
      <a
        [ixTest]="[alert().key, 'open-link']"
        (click)="openLink()"
      >
        {{ linkLabel | translate }}
      </a>
    }
  </div>
</div>
